<template>
    <div class="w-full overflow-scroll " style="background-color: var(--boxborder);">
        <div class=" w-[96%] ml-[3%]">
            <div class="w-full h-40 flex-wrap text-sm mt-10 pl-5 pt-5 rounded-lg" style="background-color: var(--showbox);">
                <div v-for="item, index in getTag.categories" class="w-full flex h-6">
                    <div class="w-[4%]">
                        <p class="w-20">{{ item }}</p>
                    </div>
                    <div class="flex w-auto items-center" v-for="items in catclass.slice(1, 6)[index]">
                        <p @click="choice = items.name" style="cursor: pointer;"
                            :style="`${items.name == choice ? 'background-color:#000;color:#eee' : ''}`"
                            class="w-full rounded-md px-2 text-gray-500">{{
                                items.name }}</p>
                    </div>
                </div>
            </div>
            <p class="leading-10">当前选择的标签: <span class="text-sm">{{ choice }}</span></p>
            <div class="flex flex-wrap" v-if="!pending">
                <div v-for="item in showlist" class="m-2">
                    <HomeMusicListCard :cover="item.coverImgUrl" :_id="item.id.toString()" :title="item.name" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onBeforeMount, onBeforeUpdate, watch, ref } from 'vue';
const choice = ref('全部')
const catclass = [Object]
const getcatdata = await useFetch('/api/musiclist/getTag')
const { data, pending, refresh } = await useFetch('/api/musiclist/getList', { query: { limit: 50, page: 0, type: choice }, refresh: true })
const getTag = getcatdata.data.value.data;
let showlist = data.value?.data.playlists;
function setTag() {
    for (let i = 0; i < 5; i++) {
        catclass.push(
            Object.freeze(getTag.sub.filter(item => item.category === i))
        )
    }
}
watch(choice, (oldvalue, newvalue) => {
    if (oldvalue !== newvalue) {
        console.log(oldvalue, newvalue)
        localStorage.setItem('listChoice', JSON.stringify(choice.value))
        refresh()
    }
})
onBeforeMount(() => {
    setTag()
})
onMounted(() => {
    if (localStorage.getItem('listChoice')) {
        choice.value = JSON.parse(localStorage.getItem('listChoice'))
    }
})
onBeforeUpdate(() => {
    showlist = data.value?.data.playlists;
})
</script>